<template>
	<view class="content">
		<view style="background-color: #165dff; width: 100%; height: 300rpx">
			<image src="../static/images/title-icon.png" mode="widthFix" class="title-bar">
			</image>
			<view class="search-bar-container">
				<view style="flex: 6">
					<uni-search-bar bgColor="rgba(255, 255, 255, 0.3)" textColor="#fff" radius="100" placeholder="搜索关键词"
						clearButton="auto" cancelButton="none" @confirm="search">
						<uni-icons slot="searchIcon" color="#fff" size="18" type="search" />
					</uni-search-bar>
				</view>
				<view style="flex: 1;margin-left: 20rpx;" @click="scan">
					<uni-icons type="scan" size="30" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 200rpx;margin-top: 20rpx;">
			<u-tabs :list="list1" @click="click" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
				color: '#303133',
				fontWeight: 'bold',
				transform: 'scale(1.05)'
			}" :inactiveStyle="{
				color: '#606266',
				transform: 'scale(1)'
			}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			</u-tabs>
			<view :style="{ height: contentHeight + 'rpx', overflow: 'auto' }" v-if="menuName == '资讯中心'">
				<InformationCenter></InformationCenter>
			</view>
			<!--<view :style="{ height: contentHeight + 'rpx', overflow: 'auto' }" v-if="menuName == '安全三个一'">
				<SafeThreeOne></SafeThreeOne>
			</view> -->
			<view :style="{ height: contentHeight + 'rpx', overflow: 'auto' }" v-if="menuName == '培训任务'">
				<TrainingTask></TrainingTask>
			</view>
			<view :style="{ height: contentHeight + 'rpx', overflow: 'auto' }" v-if="menuName == '班前会'">
				<ClassMeeting></ClassMeeting>
			</view>
			<!-- <view>
				<u-notice-bar :text="text1"></u-notice-bar>
			</view> -->
		</view>
	</view>
</template>

<script>

import InformationCenter from './index/informationCenter';
import SafeThreeOne from './index/safeThreeOne';
import TrainingTask from './index/trainingTask';
import ClassMeeting from './index/classMeeting';
export default {
	components: {
		InformationCenter,
		SafeThreeOne,
		TrainingTask,
		ClassMeeting
	},
	data() {
		return {
			searchValue: "123123",
			text1: '公司内部交流平台，未经许可不得外传',

			list1: [{
				name: '资讯中心'
			},
			{
				name: '培训任务'
			}],
			menuName: '资讯中心',
			contentHeight: 500
		};
	},
	// ... existing code ...
	computed: {
		availableHeight() {
			uni.getSystemInfo({
				success: (res) => {
					this.contentHeight = res.windowHeight + 200;
				},
			});
		}
	},
	methods: {
		search(res) {
			uni.showToast({
				title: "搜索：" + res.value,
				icon: "none",
			});
		},
		click(item) {
			console.log('item', item);
			this.menuName = item.name;
			console.log('item', this.menuName);
		},
		//扫一扫功能
		scan(){
			uni.scanCode({
            onlyFromCamera: true, // 只允许从相机扫码
            scanType: ['qrCode'], // 只识别二维码
            success: res => {
                console.log('扫码结果:', res)
                if(res.result) {
                    // 示例：处理扫描到的二维码内容
                    uni.showToast({
                        title: `扫描到：${res.result}`,
                        icon: 'none'
                    })
                    // 实际业务中可添加跳转逻辑
                    // uni.navigateTo({url: res.result})
                }
            },
            fail: err => {
                console.error('扫码失败:', err)
                let msg = '扫码已取消'
                if(err.errMsg === 'scanCode:fail auth deny') {
                    msg = '请允许使用摄像头'
                    uni.showModal({
                        title: '权限提示',
                        content: '需要摄像头权限才能扫码',
                        success: res => {
                            if(res.confirm) {
                                uni.openSetting() // 打开设置页
                            }
                        }
                    })
                }
                uni.showToast({ title: msg, icon: 'none' })
            }
        })
		}

	},
};
</script>

<style lang="scss">
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100vh;
}

.title-bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 400rpx;
	height: 400rpx;
}

.search-bar-container {
	margin-top: 200rpx;
	display: flex;
	align-items: center;
	opacity: 0.6;
}

/deep/ .uni-searchbar__box .uni-searchbar__text-placeholder {
	color: #fff;
	opacity: 1;
}

/deep/ .uni-searchbar .uni-searchbar__box .uni-searchbar__text-input {
	color: #fff;
	opacity: 1;
}
</style>